<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- HTML结构
    <div id="test-div">
      <p id="test-js">javascript</p>
      <p>Java</p>
    </div> -->
    <!-- HTML结构 -->
<!-- <ol id="test-list">
  <li class="lang">Scheme</li>
  <li class="lang">JavaScript</li>
  <li class="lang">Python</li>
  <li class="lang">Ruby</li>
  <li class="lang">Haskell</li>
</ol> -->
<!-- HTML结构 -->
<!-- <tr>
  <td><input type="text"></td>
</tr>
<tr>
  <td><input type="password"></td>
</tr>
<tr>
  <td><input type="radio"></td>
</tr>
<tr>
  <td><input type="checkbox"></td>
</tr>
<tr>
  <td><input type="hidden"></td>
</tr>
<tr>
  <td><select></td>
</tr> -->

<!-- HTML结构 -->
<!--   -->
  <!-- <script>
    'use strict';
var checkRegisterForm = function () {
    var name=document.getElementById('username').value
    var pwd=document.getElementById('password').value
    var pwd2=document.getElementById('password-2').value
    var check=/^\w{3,10}$/
    var check2=/^\w{6,20}$/
    console.log(check.test(name))
    if(!check.test(name)){
      alert('用户名必须是3-10位英文字母或数字')
      return false
    }
    if(!check.test(pwd)||pwd!=pwd2){
      alert('口令必须是6-20位且口令相同')
      return false;
    }
    return true
}

// 测试:
// 用户名必须是3-10位英文字母或数字；

// 口令必须是6-20位；
;(function () {
    window.testFormHandler = checkRegisterForm;
    var form = document.getElementById('test-register');
    if (form.dispatchEvent) {
        var event = new Event('submit', {
    		bubbles: true,
    		cancelable: true
  		});
        form.dispatchEvent(event);
    } else {
        form.fireEvent('onsubmit');
    }
})(); -->
  <!-- </script> -->
  <!-- HTML结构 -->
<!-- <div id="test-jquery">
  <p id="para-1" class="color-red">JavaScript</p>
  <p id="para-2" class="color-green">Haskell</p>
  <p class="color-red color-green">Erlang</p>
  <p name="name" class="color-black">Python</p>
  <form class="test-form" target="_blank" action="#0" onsubmit="return false;">
      <legend>注册新用户</legend>
      <fieldset>
          <p><label>名字: <input name="name"></label></p>
          <p><label>邮件: <input name="email"></label></p>
          <p><label>口令: <input name="password" type="password"></label></p>
          <p><button type="submit">注册</button></p>
      </fieldset>
  </form>
</div> -->
<!-- HTML结构 -->
<!-- 
<div class="test-selector">
  <ul class="test-lang">
      <li class="lang-javascript">JavaScript</li>
      <li class="lang-python">Python</li>
      <li class="lang-lua">Lua</li>
  </ul>
  <ol class="test-lang">
      <li class="lang-swift">Swift</li>
      <li class="lang-java">Java</li>
      <li class="lang-c">C</li>
  </ol>
</div> -->
<!-- <ul id="test-list">
  <li>JavaScript</li>
  <li>Swift</li>
  <li>HTML</li>
  <li>ANSI C</li>
  <li>CSS</li>
  <li>DirectX</li>
</ul> -->
<!-- <form id="test-form" action="#0" onsubmit="return false;">
  <p><label>Name: <input name="name"></label></p>
  <p><label>Email: <input name="email"></label></p>
  <p><label>Password: <input name="password" type="password"></label></p>
  <p>Gender: <label><input name="gender" type="radio" value="m" checked> Male</label> <label><input name="gender" type="radio" value="f"> Female</label></p>
  <p><label>City: <select name="city">
    <option value="BJ" selected>Beijing</option>
    <option value="SH">Shanghai</option>
    <option value="CD">Chengdu</option>
    <option value="XM">Xiamen</option>
  </select></label></p>
  <p><button type="submit">Submit</button></p>
</form>  -->
<!-- <style>
  .highlight {
      color: #dd1144;
      background-color: #ffd351;
  }
  </style>
  
  <div id="test-highlight-css">
      <ul>
          <li class="py"><span>Python</span></li>
          <li class="js"><span>JavaScript</span></li>
          <li class="sw"><span>Swift</span></li>
          <li class="hk"><span>Haskell</span></li>
      </ul>
  </div> -->
  <form id="test-form" action="test">
    <legend>请选择想要学习的编程语言：</legend>
    <fieldset>
        <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a></p>
        <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
        <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
        <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
        <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
        <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
        <p><button type="submit">Submit</button></p>
    </fieldset>
</form>
<script src="jquery-3.6.0.min.js"></script>
<script src="js.js"></script>
</body>
</html>